import React, { Component } from 'react'
import { Button } from 'antd'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { addPerson } from '../../redux/actions/person'

class Person extends Component {
  addPerson = () => {
    const name = this.name.value
    const age = this.age.value
    const personObj = { id: nanoid(), name, age }
    this.props.addPerson(personObj)
    this.age.value = ''
    this.name.value = ''
  }

  render() {
    console.log(this.props)
    return (
      <div>
        <h1>上方：{this.props.count}</h1>
        <input ref={(c) => (this.name = c)} placeholder="名字" />
        <input ref={(c) => (this.age = c)} placeholder="年龄" />
        <Button onClick={this.addPerson}>添加</Button>
        <ul>
          {this.props.persons.map((item) => {
            return (
              <li key={item.id}>
                {item.name} + {item.age}
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

export default connect((state) => ({ persons: state.persons, count: state.count }), {
  addPerson
})(Person)
